<template>
  <div class="popup-content">
    <div class="popup-header">
      <h3 :title="info.name || '未命名医院'">{{ info.name || '未命名医院' }}</h3>
      <span class="close-btn" @click="handleClose">&times;</span>
    </div>
    <div class="popup-body">
      <div class="hospital-info">
        <p><strong>监控点数量：</strong><span class="monitor-count">{{ info.children?.length || 0 }}</span></p>
        <p><strong>医院地址：</strong><span class="address-text" :title="addressText">{{ addressText }}</span></p>
      </div>
      
      <div class="monitor-list-title">监控点列表</div>
      <div class="monitor-list" v-if="info.children && info.children.length > 0">
        <div 
          v-for="(monitor, index) in info.children" 
          :key="index"
          class="monitor-item"
          :class="{'online': monitor.status === 'online'}"
          @click="handleMonitorClick(monitor)"
        >
          <div class="monitor-icon"></div>
          <div class="monitor-name">{{ monitor.ChannelName || monitor.Name || '未命名监控点' }}</div>
          <div :class="['status-badge', 'status-' + monitor.status]"></div>
        </div>
      </div>
      <div class="empty-list" v-else>
        <div class="empty-text">暂无监控点</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 定义监控点信息接口
interface MonitorInfo {
  ChannelName?: string
  Name?: string
  OwnerId?: string
  DeviceSerial?: string
  ChannelNo?: number
  status: 'online' | 'offline' | 'error'
  addressObj?: any
  coordinates?: [number, number]
  [key: string]: any
}

// 定义医院信息接口
interface HospitalInfo {
  name: string
  areaName?: string
  ObjectId?: string
  Address?: string
  addressObj?: any
  children?: MonitorInfo[]
  [key: string]: any
}

// 定义组件属性
const props = defineProps<{
  info: HospitalInfo
}>()

// 定义事件
const emit = defineEmits<{
  (e: 'close'): void
  (e: 'monitorSelect', monitor: MonitorInfo): void
}>()

// 计算属性：地址文本
const addressText = computed(() => {
  if (props.info.Address) {
    try {
      const addressObj = JSON.parse(props.info.Address)
      return addressObj.Address || '未知地址'
    } catch(e) {
      return props.info.Address || '未知地址'
    }
  }
  return '未知地址'
})

// 事件处理函数
const handleClose = () => {
  emit('close')
}

// 处理监控点点击
const handleMonitorClick = (monitor: MonitorInfo) => {
  emit('monitorSelect', monitor)
}
</script>

<style scoped>
.popup-content {
  padding: 0;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  background: #f5f7fa;
  border-radius: 4px 4px 0 0;
}

.popup-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
  max-width: 330px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.close-btn {
  cursor: pointer;
  font-size: 20px;
  color: #999;
  transition: all 0.3s;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
}

.close-btn:hover {
  color: #666;
  background: rgba(0,0,0,0.05);
}

.popup-body {
  padding: 6px 16px;
  background: white;
}

.hospital-info p {
  margin: 12px 0;
  font-size: 14px;
  color: #666;
  display: flex;
}

.hospital-info strong {
  color: #333;
  margin-right: 8px;
  width: 88px;
  flex-shrink: 0;
}

.hospital-info span {
  flex: 1;
  word-break: break-all;
}

.monitor-count {
  color: #409EFF;
  font-weight: bold;
}

.address-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  max-height: 2.8em;
}

.monitor-list-title {
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.monitor-list {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.monitor-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
  margin-bottom: 4px;
  position: relative;
}

.monitor-item:hover {
  background: rgba(64, 158, 255, 0.1);
}

.monitor-icon {
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23909399"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 10c0-3.31-2.69-6-6-6s-6 2.69-6 6 2.69 6 6 6 6-2.69 6-6zm-3 0c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3z"/></svg>');
  background-size: contain;
  margin-right: 8px;
  flex-shrink: 0;
}

.monitor-item.online .monitor-icon {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2367C23A"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 10c0-3.31-2.69-6-6-6s-6 2.69-6 6 2.69 6 6 6 6-2.69 6-6zm-3 0c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3z"/></svg>');
}

.monitor-name {
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #606266;
}

.status-badge {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 8px;
  flex-shrink: 0;
}

.status-online {
  background-color: #67C23A;
}

.status-offline {
  background-color: #909399;
}

.status-error {
  background-color: #F56C6C;
}

.empty-list {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  color: #909399;
  background: #f8f8f8;
  border-radius: 4px;
}
</style> 